<template>
	<div class="product">
	<div class="productList" v-for="(item,index) in productList" @click="jumpUrl(item.id)">
		<div class="contents">
			<div class="leftImg">
				<img :src="item.thumbnail" />
			</div>
			<div class="rightInformation">
				<p class="productName">{{item.productName}}</p>
				<p class="deposit"><span>租赁押金</span><span class="prices" :style="{textDecoration:(isMember? 'line-through':'')}">￥{{item.deposit}}元</span></p>
				<p class="deposit"><span>会员押金</span><span class="prices" :style="{textDecoration:(!isMember? 'line-through':'')}">￥{{item.memberRentPrice}}元</span></p>	
				<p class="rentPrice"><span>租赁价格</span><span class="prices">￥{{item.rentPrice}}元/每天</span></p>
			</div>
		</div>
		<div class="details">
            <p class="shortDesc">【{{item.shortDesc}}】</p>
		</div>
	</div>
	<root :sort="sort"></root>
	<!--<p class="addMore">加载更多</p>-->
</div>
</template>

<script>
import root from '@/components/m-footer/root'
	export default{
		name:"product",
		components: { 
		   root
       },
		data () {
			return {	
				productList:[],
				sort:0,
				isMember:'',
			}
		},
		created () {
		  this.$http.get(this.$store.state.reqUrl + '/products', {     
            }).then(res => {
            	if(res.status == 200){
            		this.productList = res.data.list;
            	}
            })
           this.getMember()
		},
		mounted () {
		},
		methods: {
			// 是否是会员
			getMember () {
				this.$http.get(this.$store.state.reqUrl + '/user/info', {}).then(res => {
					this.isMember = res.data.isMember
			   }).catch(res => {
			   	 this.$toast(res.response.data)
			   })
			},
			jumpUrl (id){
				this.$router.push({path:'/productInfomation',query:{product_id:id,isMember:this.isMember}});
			}
		}
	}
</script>

<style lang="less" scoped>
   .product {
   	width: 100%;
   	margin-bottom: 100px;
   	.addMore {
   		text-align: center;
   		margin-top: 20px;
   	}
   	.productList {
   		width: 100%;
   		margin-bottom: 20px;
   		background: #FFFFFF;
   		.contents {
   			display: flex;
   			padding: 35px 20px 20px 20px;
   			.leftImg {
   				width: 250px;
   				img {
   					width: 100%;
   					height: 150px;
   					border-radius: 8px;
   				}
   			}
   			.rightInformation {
   				flex: 1;
   				margin-left: 20px;
   				font-size: 28px;
   				.productName {
   					font-size: 36px;
   					color: #000000;
   					font-weight: 800;
   					margin-bottom:10px;
   				}
   				.deposit{
   					.prices {
   					   margin-left: 20px;
   					   color: red;
   				   }
   				}
   				.rentPrice{
   					.prices {
   					   margin-left: 20px;
   					   color: red;
   				   }
   				}
   			}
   		}
   		.details{
   			font-size: 26px;
   			p{
   				padding:0 20px 35px 20px;
   			}
   		}
   	 }
   }
</style>